<template>
	<view class="content">
		<cu-custom dataHeight="100" :isBack="true" style="width: 100%;" :isFixed="true" class="text-white">
			<block slot="content">
				<text class="text-xl"></text>
			</block>
		</cu-custom>
		
		<view class="head">
		
		
			<view class="head-left">
				
				
				<view class="head-title">
					
					<text class="head-title-text">
						鬼怪查询
					</text>
				</view>
				<view class="head-info">
					<text class="head-info-text">
						查询鬼怪属性，等级，血量等信息
					</text>
				</view>
				<!-- 选项框 -->
				<view class="select">
					<view class="select-item1">
						<picker @change="bindPickerChange" :value="selectIndex1" :range="arrayX" 
							class="picker">
							<view style="padding: 20rpx;color: #FFFFFF;">
								
								<template v-if="showDom"> 
									 属性
								</template>
								<template v-else>
										{{ dataT }}
								</template>
									
						
								
								<image src="https://jianxia.mazhoudao.com/h5/static/home/guaiwu/down.png" class="down-arrow"></image>
							</view>
						</picker>
					</view>
					<view class="select-item2">
						<picker @change="bindPickerChange1" :value="selectIndex" :range="property">
							<view style="padding: 20rpx;color: #FFFFFF;">
								
								<template v-if="showDom2">
									 等级
								</template>
								<template v-else>
										{{ dataV }}
								</template>
								
								
								<image src="https://jianxia.mazhoudao.com/h5/static/home/guaiwu/down.png" class="down-arrow"></image>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="head-right">
				<image class="bg-set" :src="headImage"></image>
			</view>
		</view>
		<!-- 列表 -->
		<!-- <view class="list">
			<view v-if="arrList[index]===0">
					<view class="list-item" v-for="(item,index) in array1" v-show="index>0">
						<view class="list-item-info">
							<text>
								{{item.name}}:{{item.value}}
							</text>
						</view>
						<view v-if="selectIndex===0" class="list-item-text-arr">
							<text v-for="(item1,index1) in item.adds" class="list-item-text">
								{{item1}}
							</text>
						</view>
						<view class="list-item-text" v-else>
							<text>
								{{item.adds[selectIndex-1]}}
							</text>
						</view>
					</view>
			</view>
			<view class="list-item" v-else>
				<view class="list-item-info">
					<text>
						{{array1[selectIndex1].name}}:{{array1[selectIndex1].value}}
					</text>
				</view>
				<view v-if="selectIndex===0" class="list-item-text-arr">
					<text v-for="(item,index) in array1[selectIndex+1].adds" class="list-item-text">
						{{item}}
					</text>
				</view>
				<view class="list-item-text" v-else>
					<text>
						{{array1[selectIndex1].adds[selectIndex-1]}}
					</text>
				</view>
			</view>
		</view> -->
		
		<!-- 列表 -->
				<view class="list">
					<!-- <view v-if="arrList[index]===0"> -->
							<view class="list-item margin-lr" v-for="(item,index) in listArr" :key="index">
								<view class="list-item-info">
									<text>
										{{item}}
									</text>
								</view>
								<!-- <view class="list-item-text" >
									<text>
										{{item.sType}}:{{item.sName}}
									</text>
								</view> -->
							</view>
					</view>
					
				</view>
				
			</view>

</template>

<script>
	// 注册自定义导航组件
	import cuCustom from '@/libs/colorui/components/cu-custom.vue';
	
	import { dengji as dengjiApi } from '@/api/dengji/index.js'
	import { shuxing as shuxingApi } from '@/api/shuxing/index.js'
	export default {
		components: {
			cuCustom
		},
		data() {
			return {
				headImage: "https://jianxia.mazhoudao.com/h5/static/home/guaiwu/guaiwu-head.png",
				arrList:[],
				listArr:[],
				arrayX:['金系','木系','水系','火系','土系'],
				property:['30-40级','40-50级','50-60级','60-70级','70-80级','80-90级','90级以上'],
				showDom:true,
				showDom2:true,
				// array: [ {
				// 		name: '金系'
				// 	}, {
				// 		name: '木系'
				// 	}, {
				// 		name: '水系'
				// 	},
				// 	{
				// 		name: '火系'
				// 	},
				// 	{
				// 		name: '土系'
				// 	}
				// ],
				// array1: [{
				// 		name: '30-40级',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	}, {
				// 		name: '40-50级',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	}, {
				// 		name: '50-60级',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	},
				// 	{
				// 		name: '60-70级',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	},
				// 	{
				// 		name: '70-80级',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	},
				// 	{
				// 		name: '80-90级',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	},
				// 	{
				// 		name: '90级以上',
				// 		value: "570-1215血",
				// 		adds: [
				// 			"金系：燕子洞、蜀冈山；",
				// 			"木系：秦始皇陵地下、五夷山；",
				// 			"水系：土匪迷宫、白云洞；",
				// 			"火系：金光洞、伏牛山东；",
				// 			"土系：雪豹洞、快活林；"
				// 		]
				// 	}
				// ],
				selectIndex: 0,
				selectIndex1: 0,
				isLV:'',
				selectValue:'',
				selectValue1:'',
				strData:"",
				dataT:"",
				dataV:"",
				attr:'',
				slv:''
			}
		},
		computed:{
			
			    
			
		},
		watch:{
			arrayX(newVal,oldVal){
				console.log('****',newVal,oldVal)
			}	
		},
		onLoad() {
			//初始化加载
			this.getguiguaiList()
			// this.bindPickerChange1()
			console.log('ggg',this.listArr.length == 0)
		},
		
		methods: {
			//属性选择
			bindPickerChange(e) {
				console.log('获取等级',this.arrayX[e.detail.value])
				this.dataT = this.arrayX[e.detail.value]
				this.attr = this.arrayX[e.detail.value]
				var value = this.arrayX[e.detail.value];
				this.selectIndex1 = value
				this.selectValue1 = value
				console.log('this.slv ',this.slv )
				
				if(this.slv !=''){
				
					 //按照属性查询
					 let sType = this.arrayX[e.detail.value]
					 let sLv = this.slv
					 // console.log('this.property[e.detail.value]',this.property[e.detail.value])
					 
					 // let sLv = this.property[e.detail.value]
					 let params1 ={
						cmd:'monster',
						sType,
						sLv
					 }
					 let params = JSON.stringify(params1)
					 shuxingApi (params).then((res)=>{
						console.log('属性查询',res.data)
						this.listArr = res.data
					 })
				}else{
					//按照属性查询
					let sType = this.arrayX[e.detail.value]
					
					// console.log('this.property[e.detail.value]',this.property[e.detail.value])
					
					// let sLv = this.property[e.detail.value]
					let params1 ={
									cmd:'monster',
									sType,
									sLv:''
						}
					let params = JSON.stringify(params1)
					shuxingApi (params).then((res)=>{
									console.log('属性查询',res.data)
									this.listArr = res.data
					})
				}
				 
				 this.showDom =false
				// this.showDom2 =true
				
				
			},
			// 获取等级
			bindPickerChange1(e) {
				this.dataV = this.property[e.detail.value]
				var value = this.property[e.detail.value];
				this.slv = this.property[e.detail.value]
				this.selectIndex = value
				this.selectValue = value
				// console.log('this.attr ',this.attr )
				
				if(this.attr !=''){
					let sLv = this.property[e.detail.value]
					let sType  = this.attr
					let params1 ={
						cmd:'monster',
						sType,
						sLv
					}
					let params = JSON.stringify(params1)
					dengjiApi (params).then((res)=>{
						console.log(res.data)
						this.listArr = res.data
						
					})
				}else{
					let sLv = this.property[e.detail.value]
					let params1 ={
						cmd:'monster',
						sType:'',
						sLv
					}
					let params = JSON.stringify(params1)
					dengjiApi (params).then((res)=>{
						console.log(res.data)
						this.listArr = res.data
						
					})
				}
				
				
				
				
				this.showDom2 =false
				// this.showDom =true
				
				
				
			},
			//全部鬼怪
			getguiguaiList () {
				this.dataT ='属性',
				this.dataV ='等级',
				
				 uni.request({
				     url: 'https://jianxia.mazhoudao.com/api/?data={%22cmd%22:%22monster%22}', 
				     success: (res) => {
				         // console.log(JSON.stringify(res.data));
						 console.log(res.data)
						 // console.log(res.data)
						 // this.strData=res.data
				         this.listArr = res.data
						 
						 
				     }
				 });
				
			},
			initList(){
				this.listArr = this.arrList.filter(item => item.sType == this.arrayX[0] )
			},
			//返回点击事件
			_backhome(){
				wx.navigateBack()
			}
			
			
		},
		
	}
</script>

<style scoped>
	page {}

	.picker {
		width: 100%;
		/* height: 140px; */
		/* cursor: pointer; */
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bottom {
		width: 100%;

	}


	.bg-set {
		width: 281rpx;
		height: 265rpx;
		float: right;
		margin-right: 54rpx;
		margin-top: 143rpx;
	}

	.head {
		display: flex;
		float: left;
		z-index: 900;
		width: 100%;
		height: 562rpx;
		margin-top: -200rpx;
		background: linear-gradient(91deg, #1F282C, #405C69);
		/* background-color: #1F282C; */
	}

	.head-left {
		width:50%;
		/* background-color: #0000FF; */
		height: 100%;
		position: relative;
	}

	.head-right {
		width: 50%;
		height: 100%;
		/* background-color: #F0AD4E; */
	}

	.head-title {
		float: left;
		margin-top: 174rpx;
		margin-left: 38rpx;
		font-size: 50rpx;
		color: #FFFFFF;
		font-weight: 500;
	}

	.head-info {
		float: left;
		margin-top: 25rpx;
		margin-left: 39rpx;
		margin-right: 10rpx;
		font-size: 24rpx;
		color: #A0AAAF;
		line-height: 2;
		font-weight: 400;
	}

	.select {
		float: left;
		width: 100%;
		margin-top: 30rpx;
		margin-left: 43rpx;
		display: flex;
		/* background-color: #0000FF; */
	}

	.select-item1 {
		width: 40%;
	}

	.select-item2 {
		width: 60%;
	}

	.down-arrow {
		height: 24rpx;
		width: 24rpx;
		margin-left: 5rpx;
	}

	.list {
		margin-top: -100rpx;
		z-index: 901;
		width: 100%;
	}

	.list-item {
		margin-top: 30rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		/* 		padding-left: 20rpx;
		padding-right: 30rpx; */
		padding-bottom: 36rpx;
		padding-top: 33rpx;
		box-shadow: 0px -3px 47px 4px rgba(101, 102, 102, 0.1);
		display: flow-root;
	}

	.list-item-info {
		margin-left: 47rpx;
		margin-right: 47rpx;
		/* 		width: 100%; */
		/* background-color: #0000FF; */
		font-size: 28rpx;
		/* font-weight: bold; */
		color: #474747;
		float: left;
	}

	.list-item-text {
		margin-left: 47rpx;
		margin-right: 47rpx;
		margin-top: 20rpx;
		/* width: 100%; */
		font-size: 28rpx;
		font-weight: 400;
		color: #474747;
		/* background-color: #0000FF; */
		float: left;
	}
	.list-item-text-arr{
		width: 100%;
		/* background-color: #09BB07; */
		display: flow-root;
	}
	.back-pre {
	position: absolute;
	  width: 56rpx;
	  height: 56rpx;
	  top: 50rpx;
	  color: white;
	  padding: 10rpx;
	}
	
	
</style>
